<template>
  <a-card  :bordered="false">
    <!--店铺信息 start-->
    <a-row type="flex" justify="start" align="middle">
      <a-col :span="12">
        <div class="" style="display: flex;align-items: center;">
          <div style="padding-right: 20px;">
            <img :src="shopInfo.detail.logoUrl" height="80px" style="max-width:120px;font-size: 12px;font-style: italic;"/>
          </div>
          <div style="flex: 1;">
            <div>
              <span style="margin-right: 20px;">{{ shopInfo.detail.name }}</span>
            </div>
            <div style="padding-top: 10px;">
              <span>入驻时间：{{ shopInfo.detail.createTime }}</span>
            </div>
            <div style="padding-top: 10px;">
              <span>提现手续费比例：{{ shopInfo.detail.cashRate }}%</span>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="text">
          供应商余额
          <a-tooltip title="当前可提现的余额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </div>
        <div class="heading">
          ¥ {{ shopInfo.detail.balance }}
          <a-button type="primary" @click="withDraw" v-if="!$route.query.id">提现</a-button>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="text">
          待结算
          <a-tooltip title="交易尚未完成的订单总额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </div>
        <div class="heading">¥ {{ shopInfo.data.waitSettlement }}</div>
      </a-col>
      <a-col :span="4">
        <div class="text">
          提现中余额
          <a-tooltip title="处于提现中的订单金额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </div>
        <div class="heading">¥ {{ shopInfo.data.drawBalance }}</div>
      </a-col>
    </a-row>
    <!--店铺信息 end-->

    <!--经营情况 start-->
    <a-row style="margin-top: 20px;">
      <a-col :span="24">
        <a-card title="供货情况">
          <a-row type="flex" justify="start" align="middle">
            <a-col :span="6">
              <div class="text">
                累计订单
                <a-tooltip title="用户累计下单并支付的订单" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
              </div>
              <div class="heading">
                ¥ {{ shopInfo.data.orderTotal }}
              </div>
              <div class="heading">
                {{ shopInfo.data.orderTotalCount }}笔
              </div>
            </a-col>
            <a-col :span="6">
              <div class="text">
                累计成交
                <a-tooltip title="累计交易完成的订单" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
              </div>
              <div class="heading">
                ¥ {{ shopInfo.data.orderDeal }}
              </div>
              <div class="heading">
                {{ shopInfo.data.orderDealCount }}笔
              </div>
            </a-col>
            <a-col :span="6">
              <div class="text">
                累计退款
                <a-tooltip title="累计退款成功的订单" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
              </div>
              <div class="heading">
                ¥ {{ shopInfo.data.orderRefund }}
              </div>
              <div class="heading">
                {{ shopInfo.data.orderRefundCount }}笔
              </div>
            </a-col>
            <a-col :span="6">
              <div class="text">
                累计提现
                <a-tooltip title="累计成功提现的金额" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
              </div>
              <div class="heading">
                ¥ {{ shopInfo.data.drawAmount }}
              </div>
              <div class="heading">
                {{ shopInfo.data.drawAmountCount }}笔
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

    </a-row>
    <!--经营情况 end-->

    <!-- 列表 start-->
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      :tabList="tabList"
      :activeTabKey="activeTabKey"
      @tabChange="(key) => {this.activeTabKey = key}">

      <rms-order-log-list ref="orderLog" v-if="activeTabKey === '1'"></rms-order-log-list>

      <sms-supplier-cash-log-list ref="shopCashLog" v-if="activeTabKey === '2'"></sms-supplier-cash-log-list>

      <rms-supplier-fund-log-list ref="shopFundLog" v-if="activeTabKey === '3'"></rms-supplier-fund-log-list>
    </a-card>


    <sms-supplier-cash-log-modal ref="modalForm" @ok="modalFormOk"></sms-supplier-cash-log-modal>

  </a-card>
</template>

<script>
  import { mixinDevice } from '@/utils/mixin.js'
  import JDate from '@/components/jeecg/JDate.vue'
  import JInput from '@/components/jeecg/JInput';
  import SmsSupplierCashLogModal from './modules/SmsSupplierCashLogModal'
  import RmsOrderLogList from './orderlog/RmsOrderLogList'
  import RmsSupplierFundLogList from './RmsSupplierFundLogList'
  import SmsSupplierCashLogList from '../mallBase/shop/SmsSupplierCashLogList'
  import { getAction } from "@api/manage";
  import Vue from "vue";
  import { ORG_CODE, SHOP_TYPE } from "@/store/mutation-types"

  export default {
    name: "Advanced",
    components: {
      JDate,
      JInput,
      RmsOrderLogList,
      RmsSupplierFundLogList,
      SmsSupplierCashLogList,
      SmsSupplierCashLogModal
    },
    mixins: [mixinDevice],
    data () {
      return {
        tabList: [
          {
            key: '1',
            tab: '订单明细'
          },
          {
            key: '2',
            tab: '提现记录'
          },
          {
            key: '3',
            tab: '账户记录'
          }
        ],
        activeTabKey: '1',
        url: {
          shopInfoUrl: "/rms/supplierFund/queryDetailById",
        },
        shopInfo: {},
      }
    },

    filters: {
      statusFilter(status) {
        const statusMap = {
          'agree': '成功',
          'reject': '驳回'
        }
        return statusMap[status]
      },
      statusTypeFilter(type) {
        const statusTypeMap = {
          'agree': 'success',
          'reject': 'error'
        }
        return statusTypeMap[type]
      },
    },
    created() {
      this.shopDetail();
    },
    methods:{
      shopDetail: function () {
        let shopId = Vue.ls.get(ORG_CODE);
        if (this.$route.query.id !== undefined) {
          shopId = this.$route.query.id;
        }
        let that = this;
        getAction(that.url.shopInfoUrl, {id: shopId}).then((res) => {
          if (res.success) {
            that.shopInfo = res.result;
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      modalFormOk: function () {
        this.shopDetail();
      },
      withDraw: function (){
        this.$refs.modalForm.title = "提现申请"
        this.$refs.modalForm.edit();
        this.$refs.modalForm.disableSubmit = false;
      }
    }
  }
</script>

<style lang="less" scoped>
  .text {
    color: rgba(0, 0, 0, .45);
    font-size: 16px;
    text-align: center;
  }

  .heading {
    color: rgba(0, 0, 0, .85);
    font-size: 20px;
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
  }
</style>
